<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            padding:10px;
            margin:10px;
            background-color: #ccc;
        }
        ul{
            list-style: none;
        }
        .nav-title{
            display: flex;
            justify-content: space-between;
        }
        .nav-li:hover{
           color: red;
        }
        .contentBox{
            width: 300px;
            height:200px;
            margin-top: 10px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>
            <ul class="nav-title">
               
            </ul>
        </div>

        <div class="contentBox">
             
        </div>
      
    </div>

    <script>
         let arr = ['生活','新闻','媒体','科技']
         let news = [
            {classify:'生活',newsarr:[
                '今日生活资讯'
            ]},
            {classify:'新闻',newsarr:[
                '今日新闻资讯'
            ]},
            {classify:'媒体',newsarr:[
                '今日媒体资讯'
            ]},
            {classify:'科技',newsarr:[
                '今日科技资讯'
            ]}
         ]

         function init () {
            
         }
         let nav_title = document.getElementsByClassName('nav-title')[0]
           arr.forEach(el=>{
             let li = document.createElement('li')
             li.className = 'nav-li'
             let node = document.createTextNode(el)
             li.appendChild(node)
             nav_title.appendChild(li)
          })




          nav_title.addEventListener('click',(e)=>{
            if(e.target.className == 'nav-title') return
            let contentBox = document.getElementsByClassName('contentBox')[0]
            contentBox.innerHTML = ''
            if(e.target.className == 'nav-li') {
               
                let backNews = news.filter(el=>{
                    return el.classify ==  e.target.innerText
                })
              
                backNews.forEach(el=>{
                    let divNode = document.createElement('div')
                    let nodeVal = document.createTextNode(el.newsarr)
                    divNode.appendChild(nodeVal)
                    contentBox.appendChild(divNode)
                })
                console.log(backNews);
             
            }
          })
        
        
    </script>
</body>
</html>